<template>
<!-- 这个组件代表的是最下方的4个组件（图标+文字) 用插槽的方式，可以复用 -->
  <div class="tab-bar-item" @click="itemClick">
      <!-- 如果不活跃的话，显示不活跃时候的图标 -->
      <div v-if="isNotActive"><slot name="item-dead-icon"></slot></div>
      <div v-else><slot name="item-active-icon"></slot></div>

      <!-- 根据isNotActive这个值，去给对应的css属性 -->
      <div :style="activeStyle"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
export default {
    name:'tabbaritem',
    // 定义一些父组件准备要传过来的属性
    props: {
        path: {
            type: String,
        },
        activeColor:{
            type:String,
            default:'red'
        }
    },

    computed: {
        isNotActive() {
            // indexof方法返回某个指定字符串值在字符串中首次出现的位置
            // this.path不存在当前页面的路径时候，返回true
            // console.log('$route.path的值是'+this.$route.path+'-----'+'this.path的值是'+this.path);
            return this.$route.path.indexOf(this.path) == -1;
        },
        activeStyle(){
            // 如果不是活跃，则返回一个空对象，是活跃的话，返回父组件传过来的颜色值
            return this.isNotActive? {}:{color:this.activeColor}
        }
    },

    methods: {
        // 点击的时候，跳转到父组件传过来的相应的路径
        itemClick() {
            this.$router.replace(this.path)
        }
    },
}
</script>

<style>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }

  .tab-bar-item img {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>